<template>
  <div class="login-content">
    <!-- 顶部导航栏 -->
    <navbar @back="back" title="登录"></navbar>
    <!-- 登录提示标题 -->
    <h4 class="login-title">您好,请登录</h4>
    <van-form @submit="onSubmit" class="login-form" ref="loginForm">
      <van-field
        v-model="phone"
        name="phone"
        placeholder="请输入手机号"
        label-width="30px"
        :rules="rules.phone"
      >
        <template #label>
          <i class="iconfont iconbianzu1"></i>
        </template>
      </van-field>
      <van-field
        v-model="code"
        name="code"
        center
        clearable
        placeholder="请输入短信验证码"
        :rules="rules.code"
        label-width="30px"
      >
        <template #label>
          <i class="iconfont iconyanzhengma"></i>
        </template>
        <template #button>
          <span v-if="totalTime === 6" class=" protocol" @click="getCode"
            >获取验证码</span
          >
          <span v-else>{{ totalTime }}秒后重新获取</span>
        </template>
      </van-field>
      <div class="login-text">
        <span
          >登录即同意 <span class=" protocol">《用户使用协议》</span> 和
          <span class=" protocol ">《隐私协议》</span>
        </span>
      </div>
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          class="login-sub"
          >确定</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 引入请求方法
import { getCode, login } from '../../api/login.js'
// 导入token工具函数
import { setToken } from '../../utils/token.js'
// 注册组件
// import navbar from '../../components/navbar.vue'
export default {
  name: 'login',
  data () {
    return {
      // 表单数据
      phone: '',
      code: '',
      // 验证规则
      rules: {
        phone: [
          {
            required: true,
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请填写用户名'
          }
        ],
        code: [
          {
            required: true,
            pattern: /^\d{4}$/,
            message: '请填写验证码'
          }
        ]
      },
      // 基地址
      baseUrl: process.env.VUE_APP_URL,
      // 验证码倒计时
      totalTime: 6
    }
  },
  methods: {
    // 返回方法
    back () {
      // 跳转到发现页面
      this.$router.push('/home/find')
    },
    // 获取验证码
    getCode () {
      this.$refs.loginForm
        .validate(['phone'])
        .then(async () => {
          // 如果校验成功则发起请求
          // 验证成功,并设置倒计时
          const timeId = setInterval(() => {
            this.totalTime--
            if (this.totalTime <= 0) {
              // 清除计时器
              clearInterval(timeId)
              // 还原时间
              this.totalTime = 6
            }
          }, 1000)
          try {
            // 包裹可能出错的代码
            const res = await getCode({ mobile: this.phone })
            // console.log(res.data.data)
            this.$toast({
              message: res.data.data,
              duration: 3000
            })
            // 自动填入
            this.code = res.data.data
          } catch (error) {
            console.log(error, '服务器异常')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 表单方法
    async onSubmit () {
      try {
        // 表单验证成功调用登录接口
        const res = await login({
          mobile: this.phone,
          code: this.code
        })
        // 添加遮罩层
        this.$toast({
          type: 'loading',
          message: '加载中...',
          duration: 0
        })
        // 保存token
        setToken(res.data.data.jwt)
        // 保存用户信息到vuex中
        // console.log(res.data.data.user)
        // 调用commit方法通过mutation修改state中的数据
        this.$store.commit('setUser', res.data.data.user)
        // 关闭加载效果
        this.$toast.clear()
        // 将用户的登录状态改为 true
        this.$store.commit('setIsLogin', true)
        // 跳转页面,因为后续操作需要token所以先设置token后再跳转页面
        // 先判断之前是否保存了访问的路径
        const toPath = this.$route.query.to_path
        if (toPath) {
          this.$router.push(toPath)
          // console.log(toPath)
        } else {
          this.$router.push('/home')
        }
      } catch {
        console.log('登录异常')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-content {
  padding: 44px 0 0;
  .login-title {
    font-size: 25px;
    margin-left: 15px;
  }
  // 表单样式
  .login-form {
    margin-top: 50px;
    .iconyanzhengma,
    .iconbianzu1 {
      margin-left: 15px;
    }
    // 表单文本样式
    .login-text {
      font-size: 10px;
      margin-left: 15px;
      margin-top: 10px;
      .protocol {
        color: #39c8de;
      }
    }
    .protocol {
      color: #39c8de;
    }
  }
  .login-sub {
    background-color: #e40137;
    border: none;
    font-size: 20px;
  }
}
</style>
